<template>
  <input
    type="text"
    v-model="todoTitle"
    @keyup.enter="addTodo"
    placeholder="请输入任务标题"
  />
  <button @click="addTodo">新增任务</button>
  <hr />
  <h2>
    正在进行 <span>{{ activeLen }}</span>
  </h2>
  <ul v-if="todoLists.length !== 0">
    <li v-for="item in activeTodoListRef" :key="item.id">
      <input type="checkbox" v-model="item.completed" />
      <input
        @focus="editorTodo(item)"
        @keyup.esc="cancelEditor(item)"
        type="text"
        v-model="item.title"
      />

      <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
    </li>
  </ul>

  <hr />

  <h2>
    已经完成 <span>{{ completedLen }}</span>
  </h2>

  <ul v-if="todoLists.length !== 0">
    <li v-for="item in finishedTodoListRef" :key="item.id">
      <input type="checkbox" v-model="item.completed" />

      <input
        @focus="editorTodo(item)"
        @keyup.esc="cancelEditor(item)"
        type="text"
        v-model="item.title"
      />

      <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
    </li>
  </ul>
  <button @click="delAllTodo">删除所有已完成任务</button>

  <Fs />
  为了查看方便我们将todolists 打印出来：
  <div v-for="i in todoLists">
    {{ i }}
  </div>
</template>
<script>
// import Fs from "./views/Fs.vue";
import todoList from "../components/todoLists";
import aaa from "../components/newTodo";
import filterTodo from "../components/filterTodo";
import editorTodo from "../components/editorTodo";
import removeTodo from "../components/removeTodo";
export default {
  setup() {
    let { todoLists } = todoList();
    return {
      todoLists,
      ...aaa(todoLists), //解构运算符  todotitle,addTodo
      ...filterTodo(todoLists),
      ...editorTodo(todoLists),
      ...removeTodo(todoLists),
    };
  },
};
</script>
<style scoped>
a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #f40;
}
a.active {
  color: #f40;
}
</style>